<template>
  <div id="app">
    <!-- 插值表达式 -->
    <!-- <h1>{{ zs }}</h1> -->
    <!-- 小写转大写 -->
    <!-- <h1>{{ ls.toUpperCase() }}</h1> -->
    <!--  -->
    <!-- <h1>{{ obj.name }}</h1> -->
    <!-- 可以写三元表达式 -->
    <!-- <h1>
      {{ obj.age > 18 ? "成年" : "未成年" }}
    </h1> -->
    <!-- 可以直接写表达式 -->
    <!-- <h1>{{ 100 + 200 }}</h1> -->

    <!-- vue-指令 -->
    <!-- 想要设置动态 html的标签属性 要使用v-bind 指令 -->
    <!-- 此时的url并不是一个变量,只是一个普通的字符串 -->
    <!-- <a href="url">百度1</a> -->
    <!--使用完 v-bind 指令,url并是一个变量,来自于data里的数据 -->
    <!-- <a v-bind:href="url">百度2</a> -->
    <!-- v-bind 指令 简写 -->
    <!-- <a :href="url">百度3</a> -->

    <!-- 绑定点击事件  v-on 指令-->
    <!-- <h1>{{ money }}</h1> -->
    <!-- 可以直接在里面写一些简单逻辑的代码 -->
    <!-- <button v-on:click="money += 1">点击+1</button> -->
    <!-- 通过在methods对象里写一个函数,调用即可 -->
    <!-- <button v-on:click="addMoney">点击+1</button> -->
    <!-- 传递参数 -->
    <!-- <button v-on:click="seleryMoney(5)">点击+5</button> -->
    <!-- 绑定点击事件  v-on 简写 @-->
    <!-- 可以直接在里面写一些简单逻辑的代码 -->
    <!-- <button @click="money += 1">点击+1</button> -->
    <!-- 通过在methods对象里写一个函数,调用即可-->
    <!-- 没有参数，事件参数可以在函数里直接获得 -->
    <!-- <button @click="addMoney">点击+1</button> -->
    <!-- 传递参数  如果有参数,事件参数的固定写法$event -->
    <!-- <button @click="seleryMoney(5, $event)">点击+5</button> -->

    <!--   事件修饰符 -->
    <!-- .prevent 阻止默认行为 -->
    <!-- 相当于在fn里，写了e.preventDefault() -->
    <a @click.prevent="fn" href="http://baidu.com">百度</a>
    <!-- .stop阻止冒泡行为 -->
    <a @click.stop="fn" href="http://baidu.com">百度</a>
    <!-- 按键修饰符 -->
    <input type="text" @keyup="fn1" />
    <!-- 监听回车键enter -->
    <input type="text" @keyup.enter="fn2" />

    <!-- 翻转练习 -->
    <h1>{{ msg }}</h1>
    <button @click="fn">翻转世界</button>

    <!-- 元素隐藏与显示 -->
    <!-- 通过v-show  值为true显示，false为隐藏-->
    <!-- 本质是通过修改css样式，display属性来实现显示与隐藏 -->
    <!-- <button @click="show = !show">点击我显示</button> -->
    <!-- <h1 v-show="false">显示</h1> -->
    <!-- 通过v-if 值为true显示，false为隐藏 -->
    <!-- 本质是通过创建和删除节点来实现显示与隐藏 -->
    <!-- <h1 v-if="false">显示</h1> -->

    <!-- v-if  v-else-if  v-else 的使用方法类似 之前的if语句 -->
    <!-- <h1 v-if="isLogin">欢迎，你好</h1>
    <h1 v-else>滚，登录去</h1>
    <h1 v-if="age >= 60">广场舞</h1>
    <h1 v-else-if="age >= 30">打麻将</h1>
    <h1 v-else-if="age >= 20">蹦迪</h1>
    <h1 v-else>唱跳rap</h1> -->

    <!-- 折叠面板案列 -->
    <!-- <button @click="show = !show">{{ show ? "折叠" : "展开" }}</button>
    <ul v-show="show">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul> -->

    <!-- 数据双向绑定  v-model -->
    <!-- 作用给 input 表单元素使用,数据和页面同时改变 -->
    <form action="" @submit.prevent="onsubmit">
      <!-- <input type="text" v-model="username" />
      <input type="password" v-model="password" /> -->
      <!-- 复选框 -->
      <!-- <div><input type="checkbox" v-model="week[0]" />星期一</div>
      <div><input type="checkbox" v-model="week[1]" />星期二</div>
      <div><input type="checkbox" v-model="week[2]" />星期三</div> -->
      <!-- 获取表单里的value值 -->
      <!-- <div><input type="checkbox" v-model="week1" value="a" />星期一</div>
      <div><input type="checkbox" v-model="week1" value="b" />星期二</div>
      <div><input type="checkbox" v-model="week1" value="c" />星期三</div> -->
      <!-- 单选框 -->
      <!-- <div><input type="radio" name="gender" v-model="gen" value="男" />男</div>
      <div><input type="radio" name="gender" v-model="gen" value="女" />女</div> -->
      <!-- 下拉列表 -->
      <!-- <select v-model="city">
        <option value="gz">广州</option>
        <option value="fs">佛山</option>
        <option value="zs">中山</option>
      </select> -->
      <!-- 文本域 -->
      <!-- <textarea v-model="content"></textarea> -->

      <!-- v-model 三个修饰符 -->
      <div>
        <!-- number 修饰符 -->
        <!-- 自动帮我们转换为数字 -->
        <input type="text" v-model.number="age" />
      </div>
      <div>
        <!-- trim 修饰符 -->
        <!-- 移除 两侧空格 -->
        <input type="text" v-model.trim="username" />
      </div>
      <div>
        <!-- 修饰符 lazy 懒 代码的执行 延迟到 输入框失去焦点之后才执行(change) -->
        <input type="text" v-model.lazy="password" />
      </div>

      <button>提交</button>
    </form>

    <!-- v-text 不会解析标签 少用-->
    <div v-text="str"></div>
    <!-- v-html 会解析标签 -->
    <div v-html="str"></div>

    <!-- v-for 循环遍历 -->
    <ul>
      <!-- 遍历数组 -->
      <!-- <li :key="item" v-for="item in list">{{ item }}</li> -->
      <li :key="item" v-for="(item, index) in list">{{ index }}--{{ item }}</li>
      <!-- 遍历对象 -->
      <li :key="key" v-for="(value, key) in person">{{ key }}--{{ value }}</li>
      <!-- 遍历数字  从1开始-->
      <li :key="item" v-for="item in 6">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
//导出一个对象
export default {
  name: "App",
  //M 数据模型
  //data函数，里面是数据
  data() {
    //必须要返回一个对象
    return {
      zs: "张三",
      obj: {
        name: "八戒",
        age: 20,
      },
      ls: "li-si",
      url: "http://baidu.com",
      money: 100,
      msg: "Hello World",
      show: false,
      isLogin: true,
      age: 60,
      username: "萨达",
      password: "123",
      content: "",
      week: [false, false, false],
      week1: [],
      gen: "",
      city: "",
      str: "<h1>大标题</h1>",
      list: ["a", "b", "c", "d"],
      person: {
        name: "八戒",
        age: 18,
        height: "140cm",
      },
    };
  },
  methods: {
    addMoney(e) {
      this.money++;
      console.log(e);
    },
    seleryMoney(price, e) {
      this.money += price;
      console.log(e);
    },
    fn() {
      // 翻转数组
      // let arr = ["a", "b", "c"];
      // arr.reverse(); //[c,b,a]
      this.msg = this.msg.split("").reverse().join("");
    },
    fn1() {
      console.log(12);
    },
    fn2() {
      console.log(45);
    },
    onsubmit() {
      console.log(this.username);
      console.log(this.password);
      // console.log(this.week);
      console.log(this.week1);
      console.log(this.content);
      console.log(this.gen);
      console.log(this.city);
      console.log(typeof this.age);
    },
  },
};
</script>

<style lang="less">
//如果没有安装less 或less-loader ,会报错
// div {
//   h1 {
//     background-color: red;
//   }
// }
</style>
